<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        body,html{
            width: 100%;
            height: 100%;
        }

        .div00 {
            width: 240px;
            height: 270px;
            margin: 100px auto;
            background: antiquewhite;
        }

        /*
          图片缩放会覆盖其他标签，使用一个大小和图片一样的div包裹起来。
          然后使用overflow: hidden;可以裁剪掉超出的部分。
	      重点：图片宽高设置和div一样。
	     */
        .div00>div{
            width: 240px;
            height: 138px;
            overflow: hidden;

        }

        .div00>div>img {
            width: 240px;
            height: 138px;
            transition: all 0.3s;
        }
        /* 自己的子元素图片 缩放动画 */
        .div00:hover>div>img {
            transform: scale(1.2);
        }
        /* 自己出现阴影*/
        .div00:hover{
            box-shadow: 1px 2px 10px gray;
        }


    </style>
</head>
<body>


<div class="div00">
    <div>
        <img src="imgs/eye.jpg" />
    </div>
    <p>一些特定的文本内容了~~~基本上这个动画是比较常用的动画，一定要好好掌握哦~~~</p>
</div>


</body>
</html>